<template>
  <div id="companypublishdetial">
    <el-form label-position="right" :model="talentInfoData" ref="rules" :rules="rules">
      <el-row>
        <el-col :span="11">
          <el-form-item label="职位名称:" label-width="120px" prop="job_title">
            <el-input v-model="talentInfoData.job_title" @focus="showDialog()"></el-input>
            <el-dialog :visible.sync="dialogVisible" size="small">
              <PositionDialog @positionName="getPostion"></PositionDialog>
            </el-dialog>
          </el-form-item>
          <el-form-item label="过期时间:" label-width="120px" prop="release_date" required>
            <el-date-picker v-model="talentInfoData.release_date" size="small" placeholder="选择日期"
                            :picker-options="pickerOptions" style="width:100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="招聘类型:" label-width="120px" prop="recruitment_type">
            <el-select v-model="talentInfoData.recruitment_type" placeholder="请选择" style="width:100%">
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作地点:" label-width="120px" prop="work_space">
            <el-cascader change-on-select v-model="talentInfoData.work_spaces" :options="provinceList"
                         style="width: 100%" :props="prop"></el-cascader>
          </el-form-item>
          <el-form-item label="工作经验:" label-width="120px" prop="work_experience">
            <el-select v-model="talentInfoData.work_experience" placeholder="请选择" style="width:100%">
              <el-option v-for="(item,index) in workExpList" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item label="学历要求:" label-width="120px" prop="academic_requirements" required>
            <el-select v-model="talentInfoData.academic_requirements" placeholder="请选择" style="width:100%">
              <el-option v-for="(item,index) in academicList" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="招聘人数:" label-width="120px" prop="recruits_count" required>
            <el-input-number v-model="talentInfoData.recruits_count" :controls="false"
                             style="width:100%"></el-input-number>
          </el-form-item>
          <el-form-item label="最低薪资(元):" label-width="120px" prop="expected_min_salary">
            <el-input-number v-model="talentInfoData.expected_min_salary" :controls="false"
                             style="width:100%"></el-input-number>
          </el-form-item>
          <el-form-item label="最高薪资(元):" label-width="120px" prop="expected_max_salary">
            <el-input-number v-model="talentInfoData.expected_max_salary" :controls="false"
                             style="width:100%"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="23">
          <el-form-item label="福利:" label-width="120px">
            <el-tag :key="tag" v-for="tag in tag_list" :closable="true" :close-transition="false"
                    @close="handleClose(tag)">{{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="职位描述:" label-width="120px" prop="position_description" style="width:97%;">
            <quill-editor class="html ql-editor" v-model="talentInfoData.position_description"></quill-editor>
          </el-form-item>
          <el-form-item>
            <div style="text-align:center;">
              <el-button type="success" size="large" @click="checkForm">保存</el-button>
              <el-button @click="Cancel" size="large">取消</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime, commonNotify } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { province } from '../../assets/js/placeList.js'
  import PositionDialog from '@/components/common/PositionDialog'

  export default {
    name: 'companypublishdetial',
    props: ['id'],
    data () {
      var checkDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('时间不能为空'))
        } else {
          callback()
        }
      }
      var checkType = (rule, value, callback) => {
        if (this.talentInfoData.recruitment_type === '') {
          return callback(new Error('招聘类型不能为空'))
        } else {
          callback()
        }
      }
      var checkDesc = (rule, value, callback) => {
        if (this.talentInfoData.position_description === '') {
          return callback(new Error('职位描述不能为空'))
        } else {
          callback()
        }
      }
      var checkminSalary = (rule, value, callback) => {
        if (this.talentInfoData.expected_min_salary === 0) {
          callback(new Error('最低薪资不能为空!'))
        }
        callback()
      }
      var checkSalary = (rule, value, callback) => {
        if (this.talentInfoData.expected_max_salary === 0) {
          callback(new Error('最大薪资不能为空!'))
        }
        if (this.talentInfoData.expected_min_salary > this.talentInfoData.expected_max_salary) {
          callback(new Error('最大薪资小于最小薪资!'))
        } else {
          callback()
        }
      }
      return {
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        tag_list: [],
        inputVisible: false,
        inputValue: '',
        talentInfoData: {
          recruitment_type: 0,
          job_title: '',
          recruits_count: 1,
          academic_requirements: 0,
          work_experience: 0,
          work_spaces: [],
          expected_max_salary: 0,
          expected_min_salary: 0,
          position_description: '',
          release_date: '',
          welfare: '',
        },
        workExpList: [],
        academicList: [],
        provinceList: [],
        statusList: [{
          value: 0,
          label: '网络招聘'
        }, {
          value: 1,
          label: '现场招聘'
        }],
        rules: {
          job_title: [
            {required: true, message: '请填写招聘职位', trigger: 'change'},
          ],
          expected_min_salary: [
            {required: true, validator: checkminSalary, trigger: 'blur'},
          ],
          expected_max_salary: [
            {required: true, validator: checkSalary, trigger: 'change'}
          ],
          release_date: [
            {validator: checkDate, trigger: 'change'}
          ],
          recruitment_type: [
            {required: true, validator: checkType, trigger: 'blur'}
          ],
          position_description: [
            {required: true, validator: checkDesc, trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到200个字', trigger: 'change'}
          ],
        },
        prop: {
          value: 'label',
          label: 'label'
        },
        companyKey: '',
        dialogVisible: false,
        returnName: '',//返回后台的职称名字
      }
    },
    created () {
      this.getList()
    },
    methods: {
      //显示dialog框
      showDialog () {
        this.dialogVisible = true
      },
      getPostion (name) {
        this.dialogVisible = false
        this.talentInfoData.job_title = name.Thr
      },
      getList () {
        this.provinceList = province()
        if (this.id === 'newpublish') {
          this.companyKey = 'HM_COMPANY_JOB_ADD'
        } else {
          this.getPublishDetailById()
          this.companyKey = 'HM_COMPANY_JOB_EDIT'
        }
        this.workExpList = getStaticMapList('work_experience')
        this.academicList = getStaticMapList('academic_requirements')
      },
      Cancel () {
        this.$emit('returnStatus', false)
      },
      //发布修改职位信息
      checkForm () {
        this.$refs['rules'].validate((valid) => {
          if (valid) {
            this.publish()
          } else {
            this.$message({
              message: '数据格式错误!',
              type: 'error',
            })
            return false
          }
        })
      },
      publish () {
        let _this = this
        let params = new Object()
        params = this.talentInfoData
        params.work_space = this.talentInfoData.work_spaces.join('/')
        params.welfare = this.fromArrToStr(this.tag_list, ';')
        params.release_date = formatterTime('date', this.talentInfoData.release_date)
        params.job_title = this.talentInfoData.job_title
        delete _this.talentInfoData.work_spaces
        if (this.companyKey === 'HM_COMPANY_JOB_EDIT') {
          params.id = this.id
        }
        postDataToServer(this.companyKey, params).then((data) => {
          if (data.status === 0) {
            if (_this.companyKey === 'HM_COMPANY_JOB_EDIT') {
              _this.$message.success('编辑成功!')
            } else {
              _this.$message.success('保存成功')
            }
            _this.$emit('returnStatus', true)
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      //获取信息
      getPublishDetailById () {
        let that = this
        let obj = new Object()
        obj.id = that.id
        postDataToServer('HM_COMPANY_JOB_GET', obj)
          .then(function (data) {
            if (data.status === 0) {
              that.talentInfoData = data.data_list
              that.talentInfoData.id = that.id
              if ('work_space' in data.data_list) {
                that.talentInfoData.work_spaces = data.data_list.work_space.split('/')
              }
              if ('welfare' in data.data_list) {
                that.tag_list = that.fromStrToArr(data.data_list.welfare, ';')
              }
              //职位字符串分解
            }
          })
      },
      //福利tag
      handleClose (tag) {
        let _this = this
        this.tag_list.forEach((element, index) => {
          if (element === tag) {
            _this.tag_list.splice(index, 1)
            return
          }
        })
      },
      handleInputConfirm () {
        let inputValue = this.inputValue
        if (inputValue) {
          this.tag_list.push(inputValue)
        }
        this.inputVisible = false
        this.inputValue = ''
      },
      showInput () {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },
      fromStrToArr (str, tip) {
        return str.split(tip)
      },
      fromArrToStr (arr, tip) {
        return arr.join(tip)
      }
    },
    components: {
      PositionDialog
    },
    watch: {
      id (val, oldVal) {
        this.getList()
      }
    }
  }
</script>

<style scoped>
  .welfare-box {
    margin: 0 0 10px 60px;
  }

  .welfare-box label {
    font-size: 14px;
    color: #48576a;
  }
</style>
